<script lang="ts">
// 导入defineComponent
import { defineComponent } from 'vue'

// 标准的组件定义，提供默认导出
export default defineComponent({
  name: 'GoodsItem'
})
</script>

<script setup lang="ts">
// 定义组件名称
defineOptions({
  name: 'GoodsItem'
})

// 属性定义
defineProps({
  goods: {
    type: Object as () => {
      id?: number | string
      image: string
      title: string
      price: string | number
      sold: string | number
    },
    required: true
  }
})

// 添加商品到购物车
const handleAddToCart = () => {
  uni.$emit('add-to-cart')
}
</script>

<template>
  <view class="flex flex-col rounded-13rpx overflow-hidden bg-white px-13rpx h-475rpx box-border">
    <wd-img :src="goods?.image" class="mb-18rpx w-337rpx h-337rpx" />
    <view class="mx-23rpx h-35rpx leading-35rpx text-22rpx font-400 text-left">
      {{ goods?.title }}
    </view>
    <view class="mx-23rpx text-[#FF3C29] text-26rpx font-bold leading-36rpx h-36rpx">￥{{ goods?.price }}</view>
    <view
      class="mx-23rpx mt-5rpx h-35rpx leading-35rpx text-22rpx font-400 text-left flex justify-between pos-relative"
    >
      <view class="text-[#999999] text-15rpx">已售：{{ goods?.sold }}</view>
      <view class="text-[#969696] mt--10rpx" @click.stop="handleAddToCart">
        <wd-icon name="/static/images/home/add.png" size="33rpx"></wd-icon>
      </view>
    </view>
  </view>
</template>

<style scoped>
/* 商品组件样式 */
</style>
